<template>
    <div class="search-box">
        <div class="flex">
            <div style="color: black;">
                <el-icon>
                    <Search />
                </el-icon><span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="resetForm">重置</el-button>
                <el-button @click="submitFn" type="primary">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px" class="from">
            <el-form ref="searchFormRef" :model="listParams" class="flex2">
                <el-form-item prop="orderSn" label="输入搜索:" label-width="200px">
                    <el-input v-model="listParams.orderSn" placeholder="订单编号"></el-input>
                </el-form-item>
                <el-form-item prop="receiverKeyword" label="收货人" label-width="200px">
                    <el-input v-model="listParams.receiverKeyword" placeholder="收货人姓名/手机号码"></el-input>
                </el-form-item>
                <el-form-item prop="createTime" label="提交时间:" label-width="200px">
                    <el-date-picker v-model="listParams.createTime" type="date" placeholder="请选择时间" style="width: 100%"
                        clearable />
                </el-form-item>
                <el-form-item prop="status" label="订单状态:" label-width="200px">
                    <el-select v-model="listParams.status" placeholder="全部" clearable>
                        <el-option label="待付款" value="0" />
                        <el-option label="待发货" value="1" />
                        <el-option label="已发货" value="2" />
                        <el-option label="已完成" value="3" />
                        <el-option label="已关闭" value="4" />
                        <el-option label="无效订单" value="5" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="orderType" label="订单分类:" label-width="200px">
                    <el-select v-model="listParams.orderType" placeholder="全部" clearable>
                        <el-option label="正常订单" value="0" />
                        <el-option label="秒杀订单" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="sourceType" label="订单来源:" label-width="200px">
                    <el-select v-model="listParams.sourceType" placeholder="全部" clearable>
                        <el-option label="PC订单" value="0" />
                        <el-option label="APP订单" value="1" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <div class="add-box">
        <div>
            <el-icon>
                <Document />
            </el-icon>数据列表
        </div>
    </div>

    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column prop="id" label="订单编号" align="center" />
        <el-table-column prop="id" label="提交时间" align="center" />
        <el-table-column prop="id" label="用户账号" width="300" align="center" />
        <el-table-column prop="id" label="订单金额" align="center" />
        <el-table-column prop="id" label="支付方式" align="center" />
        <el-table-column prop="id" label="订单来源" align="center" />
        <el-table-column prop="id" label="订单状态" align="center" />
        <el-table-column prop="id" label="操作" align="center" />
    </el-table>
    <div class="Page">
        <div class="p">
            <el-select v-model="state2" placeholder="全部">
                <el-option label="批量发货" value="0" />
                <el-option label="关闭订单" value="1" />
                <el-option label="删除订单" value="2" />
            </el-select>
            <el-button type="primary" @click="sure(state2)">确定</el-button>
        </div>
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize"
                :page-sizes="[5, 10, 15]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </ElConfigProvider>
    </div>
</template>
<script setup lang='ts'>
import { reactive, ref, toRefs } from 'vue';
import { Search, Document } from "@element-plus/icons-vue";
import { FormInstance, ElConfigProvider, ElMessage } from 'element-plus';
import { user } from '@/api';
import zhCn from "element-plus/lib/locale/lang/zh-cn";
const searchFormRef = ref<FormInstance>()
// 订单列表-传递的参数
const listParams = reactive<list>({
    createTime: "",
    orderSn: "",
    orderType: null,
    pageNum: 1,
    pageSize: 5,
    receiverKeyword: "",
    sourceType: null,
    status: null
})

// 约束state
interface IState {
    tableData: getlist[];
    total: number,
    totalPage: number
}
// 存放数据
const state = reactive<IState>({
    tableData: [],
    total: 0,
    totalPage: 0
})


// ids的集合
const idsArray = reactive<{
    id: number[]
}>({
    id: []
})

const handleSelectionChange = (val: getlist[]) => {
    idsArray.id = val.map(item => item.id)
    console.log(idsArray.id);
}

// 确定按钮
const sure = (val: number) => {
    if (val == 0) {

    } else if (val == 1) {

    } else if (val == 2) {
        if (idsArray.id.length == 0) {
            ElMessage.error("请勾选订单")
            return
        }
        user.deleteList(idsArray.id).then(res => {
            if (res.code == 200) {
                console.log(res.data);
            }
        })
    }
}



// 批量操作的值
const state2 = ref()

// 封装请求数据
const getlistInfo = () => {
    user.listInfo(listParams).then(res => {
        if (res.code == 200) {
            state.tableData = res.data.list
            state.total = res.data.total
        }
    })
}


// 重置
const resetForm = () => {
    searchFormRef.value?.resetFields()
}

// 查询
const submitFn = () => {
    getlistInfo()
}

// 显示页数
const handleSizeChange = (value: number) => {
    getlistInfo()
}
const handleCurrentChange = (value: number) => {
    getlistInfo()
}



let { tableData, total } = toRefs(state)
</script>
<style lang="less" scoped>
.search-box {
    padding: 20px;
    border-radius: 3px;
    box-shadow: 0 0 1px 2px #ccc;
    color: black;
    color: black;
    font-size: 20px;

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .flex2 {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

.el-icon {
    vertical-align: top;
}

.from {
    .el-form-item {
        width: 400px;
    }
}

.add-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    margin: 20px 0;
    height: 66px;
    border-radius: 3px;
    box-shadow: 0 0 1px 2px #ccc;
    color: black;
    font-size: 20px;
    box-sizing: border-box;
}

.Page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .p {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .el-button {
            margin-left: 20px;
        }
    }
}
</style>